<template>
  <view class="empower">
    <view class="example">
      <!-- 基础表单校验 -->
      <view class="info_con">
        <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
          <uni-forms-item label="社团/组织名称：" required name="name" label-position="top">
            <uni-easyinput v-model="valiFormData.name" placeholder="社团/组织名称" />
          </uni-forms-item>
          <uni-forms-item label="请选择类别" required label-position="top">
            <uni-data-picker v-model="valiFormData.value" :localdata="range" @change="change()" popup-title="选择类别">
            </uni-data-picker>
          </uni-forms-item>
          <uni-forms-item label="工号/学号：" required name="id" label-position="top">
            <uni-easyinput v-model="valiFormData.id" placeholder="请输入工号或者学号" />
          </uni-forms-item>
          <uni-forms-item label="联系方式：" required name="number" label-position="top">
            <uni-easyinput v-model="valiFormData.number" placeholder="请输入QQ号\微信号\手机号码" />
          </uni-forms-item>
          <uni-forms-item label="申请理由：" name="introduction" label-position="top">
            <uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入申请理由" />
          </uni-forms-item>
        </uni-forms>
      </view>
      <button type="default" @click="submit('valiForm')">提交</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tag: 1,
        range: [{
            value: 1,
            text: "校级"
          },
          {
            value: 2,
            text: "学院"
          },
          {
            value: 3,
            text: "社团"
          },
          {
            value: 4,
            text: "竞赛"
          },
          {
            value: 5,
            text: "运动"
          },
          {
            value: 6,
            text: "公益"
          },
          {
            value: 7,
            text: "招聘"
          },
        ],
        valiFormData: {
          name: '',
          id: '',
          number: '',
          introduction: '',
          value: 1
        },
        // 校验规则
        rules: {
          name: {
            rules: [{
              required: true,
              errorMessage: '姓名不能为空'
            }]
          },
          number: {
            rules: [{
              required: true,
              errorMessage: '联系方式不能为空'
            }]
          },
          id: {
            rules: [{
              required: true,
              errorMessage: '学号不能为空'
            }, {
              format: 'number',
              errorMessage: '学号只能输入数字'
            }]
          }
        },
      };
    },
    methods: {
      change(e) {
        this.tag = e.detail.value[0].value
      },
      async getEmpower() {
        const query = {
          "target_type": this.valiFormData.value,
          "name": this.valiFormData.name,
          "number": this.valiFormData.id,
          "phone": this.valiFormData.number,
          "reason": this.valiFormData.introduction
        }
        console.log(query);
        const header = {
          Authorization: uni.getStorageSync('token')
        }
        const {
          data: res
        } = await uni.$http.post("/reglog/audit_request", query)
        if (res.code != 1000) return uni.$showMsg()
        console.log(res);
        setTimeout(function() {
          uni.setStorageSync('is_empower', JSON.stringify(true))
          uni.switchTab({
            url:'../../pages/My/My'
          })
        }, 2000)
      },
      submit(ref) {
        this.$refs[ref].validate().then(res => {
          this.getEmpower()
          console.log('success', res);
          uni.showToast({
            title: `请耐心等待审核`
          })
        }).catch(err => {
          console.log('err', err);
        })
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: rgba(225, 227, 230, 100);
  }

  .empower {
    button {
      background-color: #1684FC;
      color: white;
      width: 70%;
      margin: 0 auto;
    }

    background-color: rgba(225, 227, 230, 100);
    padding-bottom: 15px;

    .info_con {
      margin: 15px auto;
      padding: 15px 0px;
      border-radius: 10px 10px 10px 10px;
      border: 1px solid rgba(187, 187, 187, 100);
      background-color: white;
      width: 313px;
      padding: 0px 20px;

      // padding-top: 19px;
      // padding-right: 20px;
      // padding-left:20px ;
      // padding-bottom: 31px;
      uni-forms {
        .uni-forms-item {
          width: 300px !important;
        }

        .label-text {
          white-space: nowrap;
          font-size: 15px !important;
          color: rgba(51, 51, 51, 100) !important;
        }

        .uni-forms-item__inner {
          padding-bottom: 18px !important;
        }

        .uni-easyinput {
          width: 312px;
        }
      }
    }


  }
</style>
